<template>
  <div>
    <input type="text" v-model="value" />
    <button @click="getValue">新增</button>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.value }}
        <button @click="onRemove(item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
let idCounter = 1;
export default {
  data() {
    return {
      list: [],
      value: "",
    };
  },
  methods: {
    getValue() {
      this.list.push({
        value: this.value,
        id: idCounter++,
      });
    },
    onRemove(id) {
      //    const idx = this.list.findIndex(item => item.id === id)
      //    this.list.splice(i, 1)
      this.list = this.list.filter((item) => item.id !== id);
    },
  },
};
</script>
